<!--
 * @Description: 
 * @Author: xiongkuobiao
 * @Date: 2023-02-03 14:24:53
 * @LastEditors: xiongkuobiao
 * @LastEditTime: 2023-02-03 14:29:28
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var animationId; //用来赋值requestAnimationFrame的id，为之后取消它做准备
    let i = 100;
    function step() {
      i--;
      console.log("我就是下次浏览器刷新前需要执行的下一帧动画", i);
      animationId = requestAnimationFrame(step); //为了在之后的每次浏览器刷新前都执行回调，递归调用回调
      if (i == 0) {
        cancelAnimationFrame(animationId); //在满足某个条件时，取消上边requestAnimationFrame的调用，终止无休止的执行回调。
      }
    }
    animationId = requestAnimationFrame(step); //最开始的调用
  </script>
</html>
